<template>
  <div>
    <div class="item"
         @click="showChildrenEvent(item)"
         :style="{paddingLeft:indent}">
      <img src="@/assets/sj.png"
           :class="['img_size',{'visib':!item.metadata}]">
      <img src="@/assets/file.png"
           class="img_size">
      <span :class="['label',{'active':dragFlag}]"
            @dragstart="dragstart($event)"
            draggable> {{label}} </span>
    </div>
    <div v-show="md_show2">
      <treedata :nodes="node.metadata"
                :key="node.md_id"
                :md_show2="node.md_show"
                :item="node"
                v-for="node in nodes"
                :label="node.md_title"
                :leve="leve+1"></treedata>
    </div>
  </div>
</template>
<script>
import EventBus from "@/utils/EventBus";
export default {
  props: ['nodes', 'leve', 'label', 'item', 'md_show2', 'rootList'],
  name: "treedata",
  data() {
    return {
      dragFlag: false,
      md_show: false,
      show_one: false,
      topList: []
    }
  },
  computed: {
    indent() {
      return (this.leve * 20) + 'px'
    }
  },
  created() {

  },
  methods: {
    dragstart() {
      this.dragFlag = true;
      let timer = setTimeout(() => {
        this.dragFlag = false;
        clearTimeout(timer)
      }, 0);
    },
    showChildrenEvent(item) {
      EventBus.$emit('getCurClickItem', item)
    },
  }
}
</script>
<style scoped>
.item {
  line-height: 37px;
  cursor: pointer;
}
.item:hover {
  background: #e6e6e6;
}
.img_size {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}
.label {
  display: inline-block;
  width: 150px;
  height: 37px;
  line-height: 37px;
}
.active {
  background: red;
  width: 100px;
  padding-left: 20px;
}
.visib {
  visibility: hidden;
}
</style>